<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <th:block th:include="include :: header('文件上传页面')"/>
    <link rel="stylesheet" th:href="@{/layuimini/lib/jq-module/zyupload/zyupload-1.0.0.min.css}" media="all">
    <style>
        .layui-table-tool-temp {
            padding-right: 0;
        }
        .layui-card-body .layui-form {
            margin: auto;
        }
        .layui-form-item {
            margin-bottom: 0px;
        }
        .dept-tree {
             width: 100%;
             height: -webkit-calc(100vh - 47px);
             height: -moz-calc(100vh - 47px);
             height: calc(100vh - 47px);
        }

    </style>
</head>
<body>
<div class="layuimini-container">
<div class="layui-row layui-col-space10">

    <div class="layui-card">
        <div class="layui-card-body">
            <div id="zyupload" class="zyupload"></div>
        </div>
    </div>
</div>
</div>

<th:block th:include="include :: footer"/>
<script th:src="@{/layuimini/lib/jq-module/zyupload/zyupload-1.0.0.min.js}" charset="utf-8"></script>
<script>
    var fileId = '[[${fileId}]]';
    var fileName = '[[${fileName}]]';
    var isPre = [[${isPre}]];

    var fileIds = "";
    layui.use( function () {

        $("#zyupload").zyUpload({
            width: "100%",                 // 宽度
            height: "400px",                 // 宽度
            itemWidth: "140px",                 // 文件项的宽度
            itemHeight: "115px",                 // 文件项的高度
            url: pName + "/system/file/upload",  // 上传文件的路径
            fileType: ["jpg", "png", "txt", "xls", "xlsx", "doc", "docx", "zip", "rar"],// 上传文件的类型
            fileSize: 51200000,                // 上传文件的大小
            multiple: true,                    // 是否可以多个文件上传
            dragDrop: true,                    // 是否可以拖动上传文件
            tailor: true,                    // 是否可以裁剪图片
            del: true,                    // 是否可以删除文件
            finishDel: false,  				  // 是否在上传文件完成后删除预览
            /* 外部获得的回调接口 */
            onSelect: function (selectFiles, allFiles) {    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                console.info("当前选择了以下文件：");
                console.info(selectFiles);
            },
            onDelete: function (file, files) {              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                console.info("当前删除了此文件：");
                console.info(file.name);
            },
            onSuccess: function (file, response) {          // 文件上传成功的回调方法
                console.info("此文件上传成功：");
                console.info(file.name);
                let result = JSON.parse(response);
                if (result.code == 1) {
                    let value = window.parent.document.getElementById(fileId).value;

                    if(value!=null && value!=''){

                        window.parent.document.getElementById(fileId).value = (value + "," + result.data);
                        window.parent.document.getElementById(fileName).value = (window.parent.document.getElementById(fileName).value + "," + file.name);
                        fileIds = (value + "," + result.data);

                    }else {
                        window.parent.document.getElementById(fileId).value =(result.data);
                        window.parent.document.getElementById(fileName).value =(file.name);
                        fileIds = (result.data);
                    }

                }
            },
            onFailure: function (file, response) {          // 文件上传失败的回调方法
                console.info("此文件上传失败：");
                console.info(file.name);
            },
            onComplete: function (response) {           	  // 上传完成的回调方法
                console.info("文件上传完成");
                if(isPre){

                    let index = 0;
                    if(fileIds != null && fileIds != ""){

                        let loading = layer.load();
                        $.ajax({
                            url: pName + '/system/file/filesInfo?fileIds=' + fileIds,
                            dataType: 'json',
                            contentType: 'application/json',
                            async: false,
                            type: 'post',
                            success: function (result) {
                                layer.close(loading);
                                if (result.code == 1) {
                                    let html = "";
                                    result.data.forEach(function (d) {
                                        if(index == 0){
                                            $(window.parent.document).find('#zyupload').val(d.fileName);
                                        } else {
                                            $(window.parent.document).find('#zyupload').val($(window.parent.document).find('#zyupload').val() + "," + d.fileName);
                                        }
                                        let imgUrl = pName + "/layuimini/lib/jq-module/zyupload/images/fileType/file.png";
                                        if(isImageExtension(d.fileName)){
                                            imgUrl = pName + "/system/file/download/" + d.id;
                                        }
                                        html += '<div id="uploadList_'+index+'" class="upload_append_list">' +
                                            '     <div class="file_bar">' +
                                            '         <div style="padding:5px;">' +
                                            '             <p class="file_name" title="'+d.fileName+'">' +
                                            '             '+d.fileName+'</p>' +
                                            '             <span class="file_edit" data-index="'+index+'" title="编辑"></span>' +
                                            '             <span class="file_del" data-index="'+index+'" title="删除" onclick="window.removeFile(\''+d.id+'\',\'uploadList_'+index+'\')"></span>' +
                                            '         </div>' +
                                            '     </div>' +
                                            '     <a style="height:115px;width:140px;" href="#" class="imgBox">' +
                                            '         <div class="uploadImg" style="width:125px;max-width:125px;max-height:105px;">' +
                                            '             <img id="uploadImage_'+index+'"class="upload_image" src="'+ imgUrl +'"' +
                                            '                 style="width:125px;">' +
                                            '         </div>' +
                                            '     </a>' +
                                            '     <p id="uploadSuccess_'+index+'" class="file_success" style="display: block"></p>' +
                                            ' </div>';
                                        index++;
                                    })
                                    $(window.parent.document).find("#preview").html("");
                                    $(window.parent.document).find("#preview").append(html);

                                    $(window.parent.document).find(".upload_append_list").hover(function(e) {
                                        $(window.parent.document).find(".file_bar").addClass("file_hover")
                                    }, function(e) {
                                        $(window.parent.document).find(".file_bar").removeClass("file_hover")
                                    })
                                    return false;
                                } else {
                                    layer.alert(result.msg, {icon: 2});
                                }
                            },
                            error: function (err) {
                                console.log(err);
                                layer.alert("服务报错", {icon: 2});
                            }
                        })

                    }
                }
                let index = parent.layer.getFrameIndex(window.name); // 获取当前窗口的索引
                parent.layer.close(index);
            }
        });
    })
    function isImageExtension(filename) {
        // 正则表达式匹配常见的图片文件扩展名
        const imageExtensionsRegex = /\.(jpg|jpeg|png|gif|webp)$/i;
        return imageExtensionsRegex.test(filename);
    }
</script>
</body>
</html>